<template>
  <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
  <div class="pane">
    <p @click="play">Play</p><br/>
    <p @click="pause">Pause</p><br/>
    <p @click="cancel">Cancel</p><br/>
    <p @click="finish">Finish</p><br/>
  </div>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"
import {route, routeList} from "@/data/route"

export default {
  name: "AddRoutePlayMulti.component",
  components: {Maptalks},
  setup() {

    const play = () => {
      for (let index = 0; index < routeList.length; index++) {
        routeList[index].player.play();
      }
    }

    const pause = () => {
      for (let index = 0; index < routeList.length; index++) {
        routeList[index].player.pause();
      }
    }

    const finish = () => {
      for (let index = 0; index < routeList.length; index++) {
        routeList[index].player.finish();
      }
    }

    const cancel = () => {
      for (let index = 0; index < routeList.length; index++) {
        routeList[index].player.cancel();
      }
    }


    let mapOnLoadCB = (map) => {
      map.setZoom(14)

      for (let index = 0; index < routeList.length; index++) {
        if (!routeList[index].player) {
          routeList[index].player = new maptalks.RoutePlayer(routeList[index], map, {
            unitTime: 500,
            maxTrailLine: 10,
          });
        }
      }

      play();
    }

    return {
      mapOnLoadCB, play, pause, finish, cancel
    }
  }
}
</script>

<style scoped lang="less">
.pane {
  background: #34495e;
  line-height: 28px;
  color: #fff;
  z-index: 10;
  position: absolute;
  top: 20px;
  right: 20px;

  p {
    cursor: pointer;
    display: block;
    color: #fff;
    text-align: left;
    padding: 0 10px;
    min-width: 28px;
    min-height: 28px;
    float: left
  }
}

</style>
